<template>
  <div class="hot">
    <div class="hot-top">
      <span>🔥</span>
      <span>本周热门榜单</span>
      <span class="hot-right">全部热门榜单></span>
      <ul class="hot-list">
        <li class="hot-item"
            v-for="item in hotList"
            :key="item.id"
            @click="toDetail">
          <img :src="item.imgSrc">
          <p>{{item.location}}</p>
          <p>
            <span class="item-price">{{item.price}}</span>起
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: ['hotList'],
  methods: {
    toDetail () {
      this.$router.push({ path: '/detail' })
    }
  }
}


</script >
<style scoped lang="stylus">
@import '~css/var.styl'
.hot
  margin-top 0.2rem
  background #fff
  font-size 0.28rem
.hot-top
  padding 0.2rem
  position relative
.hot-top span
  color #212121
  font-size 0.32rem
.hot-top .hot-right
  position absolute
  right 0.2rem
  color #616161
  font-size 0.28rem
.hot-list
  overflow-x scroll
  overflow-y hidden
  white-space nowrap
  height 3.3rem
.hot-item
  display inline-block
  padding 0.1rem
  padding-top 0.2rem
  width 2rem
  height 2rem
.hot-item img
  width 100%
  height 100%
.hot-item p
  margin-top 0.1rem
  text-align center
  font-size 0.24rem
  textOverflow()
.hot-item p .item-price
  color #ff8300
  font-size 0.3rem
  font-weight bold
</style>